<template>
	<view class="carMap">

		<view class="mapshow">
			<map style="width: 750rpx; height: 750rpx;" :latitude="latitude" :longitude="longitude" :markers="markers" :circles="circles"
			 scale="17" :enable-traffic="false" :show-compass="true" :enable-overlooking="true" :enable-satellite="true">
			</map>
		</view>

		<view class="report-title">
			<view class="lins">
<!-- 				<view class="report-date" @tap="timeSelect(true)">
					<view style="font-weight: 550;">选择时间</view>
					<view class="text">
						<text>{{time}} </text>
						<u-icon class="arrow-down" name="arrow-right"></u-icon>
					</view>
				</view> -->
				<view class="report-date" @tap="timeSelect(false)">
					<view style="font-weight: 550;">选择时间</view>
					<view class="text">
						<text>{{timeone}} </text>
						<u-icon class="arrow-down" name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="search">
					<view class="btn" hover-class="searchbtn" @tap="panduan">查询</view>
				</view>
			</view>
		</view>

		<!-- <u-picker mode="time" v-model="timeShow" :params="params" @confirm="confirm" :default-time="initMonth"></u-picker> -->
		<u-picker mode="time" v-model="timeShowone" :params="params" @confirm="confirmone" :default-time="initMonthone"></u-picker>
	</view>
</template>

<script>
	import {
		checkOpenGPSServiceByAndroid,
		gpsToGcj
	} from "@/common/index.js"
	import {
		carPath
	} from "@/api/car.js"
	import {
		getSite
	} from "@/api/site.js"
	let num = 0
	export default {
		data() {
			return {
				latitude: 39.909,
				longitude: 116.39742,
				circles: [], //圆
				markers: [],
				timer: null,
				id: null,
				timeShow: false,
				timeShowone: false,
				time: null,
				timeone: null,
				initMonth: null,
				initMonthone: null,
				les: 0,
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false,
					timestamp: true,
				},
				queryInfo: {
					Asc: 1,
					Identifier: 'Longitude-Latitude',
					PageSize: 100,
					// StartTime: 1607293325000,
					StartTime: 1606826675872,
					EndTime: 1608554675872,
				}
			}
		},
		created() {
			// checkOpenGPSServiceByAndroid()
			this.getMonth()
			this.getinitMonth()
			this.getLocationInfo()
		},
		onLoad(option) {
			this.id = option.id
			// this.getCarPath()
		},
		mounted() {
			this.getSiteData()
		},
		destroyed() {
			clearInterval(this.timer)
		},
		methods: {
			async getCarPath() {
				let {
					result: res
				} = await carPath(this.id, this.queryInfo)
				console.log(res);
				if(res.PropertyDataInfos.PropertyDataInfo.length === 0 && res.NextValid === false){
					this.$urlTo.Tip("暂无数据")
					return
				}
				if(num > 2){
					num = 0
					return
				}
				num++
				// 数据清洗
				this.updateData(res.PropertyDataInfos.PropertyDataInfo)
				if (res.NextValid) {
					this.queryInfo.StartTime = res.NextTime
					this.getCarPath()
				}
				// console.log(res);
				console.log(res.NextValid);
			},
			updateData(listData) {
				let [lat, long] = listData
				if(lat.List.PropertyInfo.length !== long.List.PropertyInfo.length){
					if(lat.List.PropertyInfo.length > long.List.PropertyInfo.length){
						lat.List.PropertyInfo.pop()
					} else {
						long.List.PropertyInfo.pop()
					}
				}
				lat.List.PropertyInfo.forEach((item, index) => {
					let pos = gpsToGcj(long.List.PropertyInfo[index].Value, item.Value)
					this.markers.push({
						id: index,
						latitude: pos[1],
						longitude: pos[0],
						alpha: 0.5,
						iconPath: '/static/positionRed.png'
					})
					if (index === 0) {
						this.latitude = pos[1]
						this.longitude = pos[0]
					}
				})
				// console.log(latitude);
			},
			// 获取地理位置
			getLocationInfo() {
				var that = this
				uni.getLocation({
					type: 'gcj02',
					success(res) {
						clearInterval(that.timer)
						// console.log(res, "当前位置");
						that.latitude = res.latitude
						that.longitude = res.longitude
						//标记点
						that.markers.push({
							id: 1,
							latitude: res.latitude,
							longitude: res.longitude,
							iconPath: '../../../../static/zu.png',
						})
						that.circles.push({ //在地图上显示圆
							latitude: res.latitude,
							longitude: res.longitude,
							fillColor: "#66666666", //填充颜色
							color: "#A7B6CB", //描边的颜色
							radius: 0, //半径
							strokeWidth: 2 //描边的宽度
						})
					},
					fail: (err) => {
						uni.showToast({
							title: "定位失败，正在重连...",
							icon: "none"
						})
						if (!this.timer) {
							checkOpenGPSServiceByAndroid() //判断是否打开了定位
							this.timer = setInterval(() => {
								this.getLocationInfo()
							}, 2000)
						}
						// setTimeout(() => {
						// 	this.getLocationInfo()
						// }, 2000)
					}
				});
			},
			getSiteData() {
				this.markers = []
				this.circles = []
				getSite({
					projectId: uni.getStorageSync('id')
				}).then(res => {
					// console.log(res)
					if (res.code !== 1) {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
						return
					}
					this.les = res.result.length
					res.result.forEach((item, index) => {
						let map = {
							iconPath: "/static/positionone.png",
							title: item.name,
							width: "30px",
							height: "30px",
							label: {
								content: item.name
							},
						}
						if (item.type === '1') {
							map.iconPath = "/static/positionGreen.png"
						} else if (item.type === '2') {
							map.iconPath = "/static/positionYellow.png"
						}
						// console.log(item)
						let cir = {
							fillColor: "#4C4C4C4C", //填充颜色
							color: "#A7B6CB", //描边的颜色
							radius: 50, //半径
							strokeWidth: 2
						}
						let pos = gpsToGcj(item.longitude, item.latitude)
						map.id = index + 1
						map.latitude = pos[1]
						map.longitude = pos[0]
			
						cir.latitude = pos[1]
						cir.longitude = pos[0]
						cir.radius = item.scope
						
						this.markers.push(map)
						this.circles.push(cir)
					})
				})
				// console.log(this.circles)
			},
			panduan() {
				if (!!this.time && !!this.timeone) {
					if (this.queryInfo.StartTime >= this.queryInfo.EndTime) {
						this.$urlTo.Tip("开始时间不能大于结束时间，请重新选择")
						this.time = this.timeone = null
						return
					}
					this.markers.splice(this.les+1 , this.markers.length - this.les)
					this.getCarPath()
					// this.$urlTo.togo("./carDetails/carDetails" , this.formAgin)
				} else {
					this.$urlTo.Tip("请选择时间")
				}
			},
			timeSelect(type) {
				if (type) {
					this.timeShow = true
				} else {
					this.timeShowone = true
				}
			},
			getMonth() {
				var MonthDate = new Date(); //上月
				this.timeone = `${MonthDate.getFullYear()}年${MonthDate.getMonth()+1}月${MonthDate.getDate()}日`
				this.queryInfo.EndTime = MonthDate.getTime()
				// var MonthDateOne = new Date(MonthDate.getTime() - 86400000)
				MonthDate.setDate(1)
				this.time = `${MonthDate.getFullYear()}年${MonthDate.getMonth()+1}月${MonthDate.getDate()}日`
				this.queryInfo.StartTime = MonthDate.getTime()
			},
			getinitMonth() {
				var MonthDate = new Date(); //上月日期
				this.initMonthone = `${MonthDate.getFullYear()}-${MonthDate.getMonth()+1}-${MonthDate.getDate()}`
				MonthDate.setDate(1);
				this.initMonth = `${MonthDate.getFullYear()}-${MonthDate.getMonth()+1}-${MonthDate.getDate()}`
				console.log(this.initMonth);
			},
			confirmone(res) {
				this.timeone = `${res.year}年${res.month}月${res.day}日`;
				// let date = new Date(`${res.year}-${res.month}-${res.day}`).getTime()
				let dateString = `${res.year}-${res.month}-${res.day}`
				let dayStart = Date.parse(new Date(dateString));//2016-12-29 0:0:0
				let dayEnd = new Date().setTime((dayStart/1000+24*60*60-1)*1000); //2016-12-29 23:59:59
				
				this.queryInfo.StartTime = new Date(dayStart).getTime()
				this.queryInfo.EndTime = new Date(dayEnd).getTime()
				this.initMonthone = `${res.year}-${res.month}-${res.day}`
				
				console.log(this.queryInfo);
			}
		}
	}
</script>

<style lang="less">
	.report-title {
		margin-top: 50rpx;
		background-color: #ffffff;
		padding-top: 20rpx;

		.lins {
			// padding: 0 20rpx;
			padding-top: 20rpx;
			box-sizing: border-box;

			.search {
				display: flex;
				justify-content: center;
				margin-top: 50rpx;
				padding-bottom: 20rpx;

				.btn {
					width: 97%;
					box-sizing: border-box;
					height: 80rpx;
					line-height: 80rpx;
					color: white;
					border-radius: 7rpx;
					box-shadow: 0 0 10rpx #C0C0C0;
					text-align: center;
					font-size: 32rpx;
					background-color: #2979FF;
				}
			}
		}

		.report-date {
			// width: 190rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding: 0 30rpx;
			padding-right: 0;
			height: 70rpx;
			background-color: white;
			border-bottom: 1px solid #dcdcdc;
			// border-radius: 30rpx;
			color: #1a1a1a;
			line-height: 70rpx;

			.text {
				color: #adadad;
			}

			&:first-child {
				// margin-bottom: 20rpx;
			}

			.arrow-down {
				// margin-left: 20rpx;
			}
		}
	}
</style>
